import {View, Text, TouchableOpacity, ToastAndroid, StyleSheet, useColorScheme, Image} from 'react-native';
import {useState, useEffect} from'react';
import {useDispatch} from 'react-redux';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { setLogin } from '../Store/actions';
import {useNavigation} from '@react-navigation/native';
import {useSelector} from 'react-redux';
import {RootState} from '../Store/store.ts';
import {UserInfo} from '../Store/actions';
import * as ImagePicker from 'react-native-image-picker';

const ProfileScreen = () => {
  const dispatch = useDispatch();
  const navigation = useNavigation();
  const userInfo: UserInfo = useSelector((state: RootState) => state.loginState.userInfo);
  const colorScheme = useColorScheme();
  const isDarkMode = colorScheme === 'dark';
  const [avatar, setAvatar] = useState(userInfo.avatar);

  const logout = async () => {
    // 清除登录状态
    await AsyncStorage.removeItem('loginState');
    // 更新 Redux 状态
    dispatch(setLogin(false, { name: '', avatar: '', token: '' }));
    ToastAndroid.show('已退出登录', ToastAndroid.SHORT);
  };

  const navigateToMyNote = () => {
    navigation.navigate('MyNoteScreen');
  }

  const selectAvatar = async () => {
    const options = {
      mediaType: 'photo',
      maxWidth: 500,
      maxHeight: 500,
      quality: 1,
    };

    const result = await ImagePicker.launchImageLibrary(options);

    if (!result.didCancel) {
      setAvatar(result.assets[0].uri);
      // 这里可以添加更新用户头像到服务器的逻辑
    }
  };

  const themeStyles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'flex-start',
      alignItems: 'center',
      backgroundColor: isDarkMode ? '#121212' : '#FFFFFF',
      paddingTop: 50,
    },
    card: {
      flexDirection: 'row',
      alignItems: 'center',
      backgroundColor: isDarkMode ? '#2c2c2c' : '#FFFFFF',
      borderRadius: 10,
      padding: 20,
      marginBottom: 20,
      width: '90%',
      shadowColor: isDarkMode ? '#000' : '#000',
      shadowOffset: {
        width: 0,
        height: 2,
      },
      shadowOpacity: 0.25,
      shadowRadius: 3.84,
      elevation: 5,
    },
    avatar: {
      width: 100,
      height: 100,
      borderRadius: 50,
      marginRight: 20,
    },
    userIdText: {
      fontSize: 18,
      color: isDarkMode ? '#FFFFFF' : '#000000',
    },
    button: {
      padding: 10,
      borderRadius: 5,
      marginBottom: 10,
      width: '90%',
      alignItems: 'center',
      backgroundColor: isDarkMode ? '#2c2c2c' : '#007BFF',
    },
    buttonText: {
      fontSize: 16,
      color: isDarkMode ? '#FFFFFF' : '#fff',
    },
    tokenText: {
      fontSize: 14,
      color: isDarkMode ? '#FFFFFF' : '#000000',
      marginTop: 20,
    },
  });

  return (
    <View style={themeStyles.container}>
      <View style={themeStyles.card}>
        <TouchableOpacity onPress={selectAvatar}>
          <Image source={{ uri: 'https://picsum.photos/100/100?random=author' }} style={themeStyles.avatar} />
        </TouchableOpacity>
        <Text style={themeStyles.userIdText}>用户 ID: {userInfo.name}</Text>
      </View>
      <TouchableOpacity style={themeStyles.button} onPress={navigateToMyNote}>
        <Text style={themeStyles.buttonText}>查看我的笔记</Text>
      </TouchableOpacity>
      <TouchableOpacity style={themeStyles.button} onPress={logout}>
        <Text style={themeStyles.buttonText}>退出登录</Text>
      </TouchableOpacity>
      <Text style={themeStyles.tokenText}>用户 Token: {userInfo.token}</Text>
    </View>
  );
}

export default ProfileScreen;
